<template>
  <div class="content">
    <div class="search">
      <YsInput class="search-input" @on-focus="clickBlur(true)" @on-blur="clickBlur(false)" @on-enter="getSubscribeList"
        v-model="pege_param.query_keyword" placeholder="请输入关键字">
        <YsIcon type="icon iconfont icon-sousuo" @click.native="getSubscribeList"
          :style="{color: inputFocus?'#405680':'rgba(64,86,128,0.6)'}" slot="prefix" />
      </YsInput>
      <Select style="width:200px;margin-right:10px" class="select-border" v-model="pege_param.sub_state">
        <Option v-for="(item, index) in selectlist" @click.native="getSubscribeList" :value="item.sub_state"
          :key="index" :label="item.name">{{ item.name }}</Option>
      </Select>

      <!-- <YsButton @click="getSubscribeList">确认</YsButton> -->
      <div class="right">
        <YsButton class="right-between" @click="$router.go(-1)">返回</YsButton>
      </div>
    </div>
    <div class="service">
      <YsCard class="service-item" v-for="(card,index) in arrCard" :key="index">

        <span class="icon iconfont icon-dingyue" @click="setDesign(card)" :class="{'active':card.single}"></span>
        <div class="img-top">
          <img class="service-img" @click.stop="goAppUsage(card)"
            :src="card.app_logo?imgurl(card.app_logo):`${require('../../assets/images/default.png')}`">
        </div>
        <ul class="service-list">
          <li>
            <label>应用编码</label>
            <span>{{card.app_code}}</span>
          </li>
          <li>
            <label>应用名称</label>
            <span>{{card.app_name?card.app_name:'--'}}</span>
          </li>
          <li>
            <label>创建时间</label>
            <span :title="card.create_time">{{card.create_time}}</span>
          </li>
          <li>
            <label>创建人员</label>
            <span>{{card.crt_user_name}}</span>
          </li>
        </ul>
      </YsCard>
    </div>
    <div class="page">
      <div class="records text_01">共{{ page.total }}条</div>
      <YsPage @on-change="pageChange" :page-size="pege_param.limit_recd" :current="pege_param.start_recd"
        :total="page.total" class="pagePallion"></YsPage>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "subscribeList",
  data() {
    return {
      inputFocus: false,
      selectlist: [
        { sub_state: 0, name: "全部选中" },
        { sub_state: 1, name: "已订阅" },
        { sub_state: 2, name: "未订阅" },
      ],
      currentItem: {},
      pege_param: {
        sub_state: null,
        query_keyword: "",
        start_recd: 1,
        limit_recd: 10,
      },
      arrCard: [],
      page: {
        tableLoad: false,
        total: 0,
      },
    };
  },
  created() {
    this.getSubscribeList();
  },
  methods: {
    ...mapActions(["getPageAppSubList", "setAppSubItem"]),
    //获取订阅列表
    getSubscribeList() {
      let _this = this;
      this.page.tableLoad = true;
      this.pege_param.sub_state = this.pege_param.sub_state
        ? this.pege_param.sub_state
        : null;
      this.getPageAppSubList(this.pege_param).then((res) => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false;
        if (status === "ok") {
          _this.page.total = data.all_recd;
          _this.arrCard = data.appBeans.map((item, index) => {
            if (item.sub_state_name == "已订阅") {
              return Object.assign(item, { single: true });
            } else {
              return Object.assign(item, { single: false });
            }
          });
        }
      });
    },
    //切换分页
    pageChange(num) {
      this.pege_param.start_recd = num;
      this.getSubscribeList();
    },
    //订阅服务开通
    openAppItem() {
      const appfilter = [];
      // this.arrCard.map((v) => {
      //   if (v.sub_state_name == "未订阅") {
      //     appfilter.push({ app_id: v.id });
      //   } else {
      //   }
      // });
      appfilter[0] = { app_id: this.currentItem.id };

      if (appfilter.length > 0 && appfilter[0]["app_id"]) {
        this.setAppSubItem({ subInfos: appfilter }).then((res) => {
          let { data, msg, scode, status } = res;
          if (status === "ok") {
            this.$YsMessage.success(data.message_text);
            this.getSubscribeList();
          } else {
            this.$YsMessage.error(msg);
          }
        });
      } else {
        this.$YsMessage.warning("已订阅");
      }
    },
    //设置
    setDesign(item) {
      if (item.sub_state_name == "已订阅") {
        item.single = true;
      } else {
        item.single = false;
      }
      this.currentItem = item;
      this.openAppItem();
    },
    //过滤是否订阅
    filterDingYue() {
      this.getSubscribeList();
    },
    //获取路径
    imgurl(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path;
    },
    //跳转app使用
    goAppUsage(item) {
      if (item.single) {
        this.$router.push({
          name: "appUsageList",
          query: item,
        });
      } else {
        return this.$YsMessage.warning("未订阅");
      }
    },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: calc(100% - 16px);
  min-width: 730px;
  padding: 16px 16px 0;
  background: #fff;
  border: 1px solid rgba(207, 215, 229, 0.8);
  border-radius: 4px;

  /deep/ .textNtro {
    textarea {
      resize: none;
      font-size: 16px;
      height: 120px;

      &::placeholder {
        line-height: 34px;
      }
    }
  }

  .iconsouter {
    width: 100%;
    height: 315px;
    border-radius: 4px;
    border: 1px solid rgba(207, 215, 229, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .iconsinner {
    width: 100%;
    width: 100%;
  }

  .search {
    display: flex;
    align-items: center;

    .search-input {
      height: 40px;
      width: 317px;
      margin-right: 16px;
      border-radius: 4px;
    }

    .search-btn {
      margin-left: auto;
    }
  }

  //下图
  .service {
    margin-top: 14px;
    margin-bottom: 10px;
    height: calc(100% - 110px);
    overflow: auto;
    width: 100%;

    .default-img {
      width: 250px;
      height: 260px;
      position: relative;
      left: 50%;
      top: 50%;
      margin: -125px 0 0 -130px;
    }

    .service-item {
      position: relative;
      float: left;
      overflow: hidden;
      width: calc(calc(100% / 5) - 13px);
      max-width: 500px;
      margin: 0px 16px 16px 0;
      border: 1px solid #cfd7e5;
      box-shadow: none;

      /deep/ .ivu-card-body {
        padding: 0;
      }

      &:nth-of-type(5n) {
        margin-right: 0;
      }

      .icon-dingyue {
        position: absolute;
        right: 12px;
        font-size: 18px;
        top: 8px;
        z-index: 99;
        cursor: pointer;
        color: rgba(140, 153, 179, 1);
      }

      .active {
        color: rgba(213, 57, 57, 1);
      }

      .cardState {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 68px;
        height: 28px;
        line-height: 28px;
        z-index: 30;
        text-align: center;
        color: #fff;
        font-size: 16px;
        border-radius: 2px;
      }

      .upper {
        background: #0091ff;
      }

      .unUpper {
        background: #e77930;
      }

      .wait {
        background: blue;
      }

      .setting {
        position: absolute;
        bottom: 14px;
        right: 10px;
        color: #405680;
        opacity: 0.6;
        cursor: pointer;
      }

      .popTip {
        display: flex;
        align-items: center;

        .tipButton {
          display: block;
          margin-left: auto;
        }
      }

      .service-footer {
        width: 100%;
        height: 53px;
        background: #f5f7fa;
        opacity: 1;
        position: absolute;
        bottom: -53px;
        left: 0;
        border-radius: 0px 0px 4px 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        padding: 0 16px;
        transition: all 0.4s;

        i {
          cursor: pointer;
          color: #405680;
        }
      }

      &:hover .service-footer {
        bottom: 0px;
      }

      &:first-child {
        margin-left: 0;
      }

      &:nth-child(6) {
        margin-left: 0;
      }

      .img-top {
        height: 225px;
        position: relative;

        .service-img {
          width: 100%;
          height: 225px;
          display: block;

          &:after {
            content: '';
            display: inline-block;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../../assets//images/default.png') no-repeat;
            background-size: 100% 100%;
            background-color: #fff;
          }
        }
      }

      .service-list {
        padding: 10px 0;

        li {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 30px;
          display: flex;

          label {
            width: 30%;
            margin-left: 20px;
            color: #405680;
            opacity: 0.6;
          }

          span {
            width: 60%;
            font-weight: 500;
            color: #405680;
          }
        }
      }

      .toolTip {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;

        .toolTipItem {
          margin: 10% 0;
        }

        button {
          display: block;
          width: 120px;
          height: 40px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid #0061ff;
          color: #0061ff;
          opacity: 1;
          border-radius: 4px;

          &:hover {
            background: #0061ff;
            color: #fff;
          }
        }

        .active-bg {
          background: #0061ff;
          color: #fff;
        }
      }
    }
  }

  .right {
    margin-left: auto;

    .right-between {
      margin-left: 10px;
      width: 80px;
      min-width: 80px;
      height: 40px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #0061ff;
      opacity: 1;
      border-radius: 4px;
      color: #0091ff;
      font-size: 16px;
      font-family: PingFang SC;
    }
  }

  .model-box {
    padding: 10px 24px 24px;

    /deep/ .label_before {
      label {
        &:before {
          content: '*';
          display: inline-block;
          margin-right: 4px;
          line-height: 1;
          font-family: SimSun;
          font-size: 14px;
          color: #d53939;
        }
      }
    }

    .icon-chain {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      margin: 25px auto 0;

      background: rgba(0, 97, 255, 0.1);
      border: 1px solid #0061ff;
      opacity: 1;
      border-radius: 4px;

      .icon {
        font-size: 40px;
        color: #0061ff;
        cursor: pointer;
      }
    }

    .formconter {
      padding: 0 16px;

      /deep/.ivu-form-item {
        width: 100%;
      }
    }
  }
}

.page {
  display: flex;
  align-items: center;

  .records {
    font-size: 16px;
    color: #405680;
  }

  .pagePallion {
    margin-left: auto;
  }
}

@media screen and (max-width: 1600px) {
  .content {
    .service {
      .service-item {
        width: calc(calc(100% / 4) - 13px);

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        &:nth-child(5) {
          margin-right: 16px;
        }

        &:nth-of-type(n + 5) {
          margin-bottom: 16px;
        }
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .content {
    .service {
      .service-item {
        width: calc(calc(100% / 3) - 13px);

        &:nth-of-type(3n) {
          margin-right: 0;
        }

        &:nth-of-type(4n) {
          margin-right: 16px;
        }

        &:nth-child(5) {
          margin-right: 16px;
        }

        &:nth-of-type(n + 5) {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
